<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG</title>
</head>

<body>
    <div class="app">圆环</div>

    <script>
        createSvgCircle({ el: '.app', strokeWidth: 8, color: '#20a0ff', strokeLinecap: 'round', percentage: 70, fontSize: 20, fontColor: '#20a0ff', showText: true });
        /**
        * 圆环进度条
        * el selector
        * width 画布宽度 
        * strokeWidth 进度条宽度
        * color 进度条背景色
        * backgroundColor 圆环颜色
        * strokeLinecap circle/dashboard类型路径两端的形状-butt/round/square
        * percentage 百分比
        * showText 是否显示文本
        * fontSize 文本字体大小
        * fontColor 文本颜色
        */
        function createSvgCircle(opts) {
            opts = { width: 126, strokeWidth: 6, strokeLinecap: 'round', showText: false, ...opts }
            // M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94
            // 中心点 M x y 相对中心点的起点 m 0 -47 半轴 a 47 47 弧度 0 大弧/小弧 1/0 顺时针/逆时针 1/0 相对起点的终点 0 -94
            var ratio = 100 / 126; // 比率
            var svgWidth = opts.width * ratio; // svg宽度
            var centerPoint = svgWidth / 2; // 圆环中心坐标
            var radius = centerPoint - opts.strokeWidth / 2; // 半径
            var path = `M ${centerPoint} ${centerPoint} m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${2 * radius} a ${radius} ${radius} 0 1 1 0 -${2 * radius}`; // 圆环路径
            var circleWidth = Math.ceil(opts.strokeWidth * ratio * 10) / 10; // 圆环宽度
            var girth = radius * 2 * 3.14; // 圆环周长
            var progress = girth * opts.percentage / 100; // 圆环进度

            var progressDom = `
            <div class="progress-circle" style="height: ${opts.width}px; width: ${opts.width}px;position:relative;">
                <svg viewBox="0 0 ${opts.width * ratio} ${opts.width * ratio}">
                    <path d="${path}" 
                        stroke="#e5e9f2" stroke-width="${circleWidth}" fill="none" 
                        style="stroke-dasharray: ${girth}px, ${girth}px; stroke-dashoffset: 0px;"
                    >
                    </path>
                    <path d="${path}" 
                        stroke="${opts.color}" stroke-linecap="${opts.strokeLinecap}" stroke-width="${circleWidth}" fill="none" 
                        style="stroke-dasharray: ${progress}px, ${girth}px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease, stroke 0.6s ease;"
                    >
                    </path>
                </svg>
                <div style="position:absolute;left:0;width:100%;top:50%;text-align:center;transform:translateY(-50%);
                    color:${opts.fontColor};font-size:${opts.fontSize}px;display:${opts.showText ? "block" : "none"}"
                >
                ${opts.percentage}%
                </div>
            </div>`;
            document.querySelector(opts.el).innerHTML = progressDom;
        }
    </script>
</body>

</html>